import type { StoryObj } from '@storybook/vue3';
import { reactive, ref } from 'vue';
import { ElButton, ElRadioGroup, ElRadio, ElTag } from 'element-plus';
import { ZwUnityKitCascader } from '../../src/ZwUnityKitCascader/index';

export default {
    title: 'Scrm System/ZwUnityKitCascader Library/ZwUnityKitCascader',
    component: ZwUnityKitCascader,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'string' },
            type: { name: 'string', required: false },
            description:
                '数字绑定的值, 如果是type是area，则数据格式为： "省code/市code/区code"。 如果是type是category，则数据格式为： "三级分类code"'
        },
        type: {
            control: { type: 'radio' },
            type: { name: 'radio', required: false },
            options: ['area', 'category']
        }
    }
};

// 默认演示
type Story = StoryObj<typeof ZwUnityKitCascader>;
export const Default: Story = {
    render: args => ({
        components: { ZwUnityKitCascader, ElButton, ElTag },
        setup() {
            const value = ref<any>();
            const numberValue = ref();

            const setValue = () => {
                value.value = numberValue.value;
            };
            return { args, value, numberValue, setValue };
        },
        template: `
            <main style="width: 473px;">
                <ZwUnityKitCascader v-model="value" v-bind="args" />
                {{ value }}
                <br />
                <div class="normal-size">
                    设置组件的值 <el-input v-model="numberValue" />
                    <el-button @click="setValue">设置</el-button>
                </div>
            </main>
        `
    })
};
